<template>
    <div class="dp-head">
        <el-row class=" border-radios-5 bg-white pt-5 pb-4">

            <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple-light " align="center">
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                    <el-col :span="24" class="pt-4 mt-3 mb-2">
                        <el-col :span="24" align="center" >
                            <h4 >智慧农业大数据</h4>
                        </el-col>
                        <el-col :span="16" :offset="4" class="scroll font-size-16">
                            <marquee  align="left" direction="left" behavior="scroll"  loop=-1 height=40 width=100% hspace=0 scrollamount=5
                                      scrolldelay=1 vspace=0><font color="#CF2728"><span>欢迎各位领导专家莅临指导</span></font></marquee>
                        </el-col>

                    </el-col>

                </div>
            </el-col>

        </el-row>
        <ControlItem :devlist="devlist"></ControlItem>
    </div>
</template>

<script>
    import {get_dev_list} from "../api/control";
    import ControlItem from "./controlitem";
    export default {
        name: 'Index',
        components:{
            ControlItem
        },
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                circleUrl: require('../assets/water_1.jpg'),
                value1: 1,
                devlist:[],
            }
        },
        created() {
            this.wsock.initWebSocket();
        },
        mounted(){
            this.get_devlist();
        },
        methods:{
            get_devlist:function (e) {
                get_dev_list().then((res)=>{
                    console.log("get_dev_list   aaaaaaaaaa ",res);
                    if(res.data.code == '1'){
                        this.devlist = res.data.data;
                        console.log(this.devlist);
                    }else{
                        alert("get_dev_list  error ");
                    }
                });
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
